表单组件需求分析
概述
表单（Form）是管理后台中最常用的业务组件之一。与表格组件类似，本节将传统的模板式表单改造为基于 Schema（JSON 配置）驱动的动态表单。核心思想是将表单结构定义为 JSON 数组，通过动态组件渲染出对应的表单项，从而实现更高的灵活性和可扩展性。
为什么使用 Schema 驱动表单
模板写法 vs Schema 写法
<!-- 模板写法：每个表单项都需要手动编写 -->
<el-form :model="form">
<el-form-item label="用户名" prop="username">
<el-input v-model="form.username" />
</el-form-item>
<el-form-item label="邮箱" prop="email">
<el-input v-model="form.email" />
</el-form-item>
<!-- 新增字段需要修改模板 -->
</el-form>
vue
<!-- Schema 写法：通过配置动态渲染 -->
<DynamicForm :schema="formSchema" :model="form" />
vue
// 新增字段只需修改配置，无需改模板
const formSchema = [
{ field: 'username', label: '用户名', component: 'el-input' },
{ field: 'email', label: '邮箱', component: 'el-input' },
// 新增字段：在数组中添加一项即可
{ field: 'phone', label: '手机号', component: 'el-input' },
]
ts
两种写法的对比
| 维度 | 模板写法 | Schema 写法 |
|---|---|---|
| 灵活性 | 每次修改需要编辑模板结构 | 修改 JSON 配置即可，无需改模板 |
| 可维护性 | 表单项多时模板代码冗长 | 配置与渲染分离，结构清晰 |
| 动态性 | 需要条件渲染（v-if）控制 | 可以动态增删表单项 |
| 可视化编辑 | 不支持 | Schema 可由可视化编辑器生成 |
| 复用性 | 每个表单单独编写 | 可复用相同的 Schema 结构 |
进阶案例：表单设计器
Starfish 表单设计器参考
表单设计器是 Schema 驱动表单的典型应用场景：
┌──────────────────────────────────────────────────────┐
│ 表单设计器 │
├──────────┬──────────────────────┬────────────────────┤
│ 组件列表 │ 拖拽区域 │ 属性设置面板 │
│ │ │ │
│ □ 输入框 │ ┌──────────────┐ │ 字段名: username │
│ □ 下拉框 │ │ 用户名输入框 │ │ 标签: 用户名 │
│ □ 单选框 │ └──────────────┘ │ 类型: el-input │
│ □ 复选框 │ ┌──────────────┐ │ 校验: required │
│ □ 日期 │ │ 邮箱输入框 │ │ 占位: 请输入 │
│ □ 开关 │ └──────────────┘ │ │
│ │ │ │
├──────────┴──────────────────────┴────────────────────┤
│ 输出 Schema: │
│ [ │
│ { "field": "username", "component": "el-input" }, │
│ { "field": "email", "component": "el-input" } │
│ ] │
└──────────────────────────────────────────────────────┘
text
可视化编辑器的核心逻辑
表单设计器工作流：
1. 左侧提供基础组件列表（输入框、下拉框、单选框等）
2. 拖拽组件到中间画布区域
3. 右侧属性面板配置选中组件的属性
4. 最终生成 Schema JSON 配置
5. Schema 驱动渲染出最终的动态表单
text
关键认知：可视化编辑器的丰富程度取决于底层基础组件的丰富程度。Element Plus 提供了丰富的基础组件，可以直接与
el-form组合实现 Schema 驱动的表单效果。
Schema 设计
基础 Schema 结构
// types/form.ts
interface FormSchema {
field: string // 字段名（对应 model 的 key）
label: string // 标签文本
component: string // 组件类型（如 'el-input', 'el-select'）
props?: Record<string, any> // 组件属性
rules?: RuleItem[] // 校验规则
colSpan?: number // 栅格占比（响应式布局）
visible?: boolean // 是否显示
disabled?: boolean // 是否禁用
slots?: Record<string, string> // 插槽配置
children?: FormSchema[] // 嵌套表单项
}
interface FormConfig {
schema: FormSchema[]
model: Record<string, any>
labelWidth?: string
labelPosition?: 'left' | 'right' | 'top'
gutter?: number
}
ts
Schema 配置示例
// schemas/login-form.ts
import type { FormSchema } from '@/types/form'
export const loginFormSchema: FormSchema[] = [
{
field: 'username',
label: '用户名',
component: 'el-input',
props: {
placeholder: '请输入用户名',
prefixIcon: 'User',
clearable: true,
},
rules: [
{ required: true, message: '请输入用户名', trigger: 'blur' },
{ min: 3, max: 20, message: '长度在 3 到 20 个字符', trigger: 'blur' },
],
},
{
field: 'password',
label: '密码',
component: 'el-input',
props: {
type: 'password',
placeholder: '请输入密码',
prefixIcon: 'Lock',
showPassword: true,
},
rules: [
{ required: true, message: '请输入密码', trigger: 'blur' },
{ min: 6, max: 20, message: '长度在 6 到 20 个字符', trigger: 'blur' },
],
},
{
field: 'remember',
label: '记住我',
component: 'el-checkbox',
props: {
label: '记住登录状态',
},
},
]
ts
响应式布局 Schema
export const registerFormSchema: FormSchema[] = [
{
field: 'username',
label: '用户名',
component: 'el-input',
colSpan: 24, // 占满一行
},
{
field: 'firstName',
label: '名',
component: 'el-input',
colSpan: 12, // 占半行
},
{
field: 'lastName',
label: '姓',
component: 'el-input',
colSpan: 12, // 占半行
},
{
field: 'email',
label: '邮箱',
component: 'el-input',
colSpan: 24,
},
]
ts
开发路线图
表单组件开发路线：
阶段一：基础实现
├── 实现 Schema → el-form-item 的动态渲染
├── 支持常用组件类型（input, select, checkbox, radio, switch）
└── 支持基础校验规则
阶段二：增强功能
├── 响应式布局（栅格系统）
├── 联动控制（字段间显隐/禁用关系）
├── 异步数据源（select 远程搜索）
└── 自定义渲染（slot 支持）
阶段三：高级特性
├── 嵌套表单（子表单、数组表单）
├── 动态增删表单项
├── 表单设计器（可视化编辑）
└── 表单持久化与回显
text
官方示例先行
推荐开发步骤：
1. 先在基础表单中实现 Element Plus 官方所有表单示例
2. 确保所有表单类型在本地都能正常运行
3. 将 el-form-item 替换为 Schema 驱动的动态渲染
4. 实现事件绑定和表单校验
5. 逐步扩展高级特性
text
实践要点
- 表单组件采用 Schema 驱动方式，将表单结构定义为 JSON 数组，通过动态组件渲染
- Schema 写法比模板写法灵活性更高，新增字段只需修改配置而无需改模板
- 进阶方向是表单设计器（可视化编辑器），通过拖拽生成 Schema 配置
- Element Plus 提供了丰富的基础组件，可直接与
el-form组合实现 Schema 驱动表单 - 开发步骤：先实现官方所有表单示例 → 替换为 Schema 渲染 → 实现事件绑定 → 扩展高级特性
- Schema 设计应支持响应式布局、校验规则、联动控制等核心功能
↑